<template>
  <div class="manage">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="40%">
      <!-- 注意：下方的:model不是vue中的v-model指令，它指的是表单数据对象,是一个object类型 -->
      <el-form :rules="rules" :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input placeholder="请输入年龄" v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期" prop="birth">
        <el-date-picker
          v-model="form.birth"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-DD">
          <!-- value-format:绑定值的格式。不指定则绑定值为 Date 对象 -->
        </el-date-picker>
      </el-form-item>
      <el-form-item label="地址" prop="addr">
          <el-input placeholder="请输入地址" v-model="form.addr"></el-input>
        </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
   </el-dialog>
   <div class="manage-header">
    <el-button @click="handleAdd" type="primary">
        + 新增
    </el-button>
    <!-- 搜索区 -->
    <el-form :inline="true" :model="userform">
      <el-form-item>
          <el-input placeholder="请输入名称" v-model="userform.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
   </div>
   <div class="common-table">
    <el-table
        stripe
        height="90%"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别">
          <template slot-scope="scope">
            <!--  此处在el-table-column内的slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
            <span>{{scope.row.sex == 1 ? '男':'女'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄">
        </el-table-column>
        <el-table-column
          prop="birth"
          label="出生日期">
        </el-table-column>
        <el-table-column
          prop="addr"
          label="地址">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
          @current-change="handlePage"
          layout="prev, pager, next"
          :page-size='15'
          :total="total">
        </el-pagination>
    </div>
   </div>
  </div>
</template>

<script>
import {getUser,addUser,editUser,delUser} from '../api'
export default {
    name:'User',
    data() {
      return {
        dialogVisible:false,
        form:{
            name:'',
            age:'',
            sex:'',
            birth:'',
            addr:''
        },
        rules:{
          name:[{required:true,message:'请输入姓名'}],
          age:[{required:true,message:'请输入年龄'}],
          sex:[{required:true,message:'请选择性别'}],
          birth:[{required:true,message:'请输入出生日期'}],
          addr:[{required:true,message:'请输入地址'}],
        
        },
        tableData:[],
        modalType:0, // 0表示新增弹窗，1表示编辑弹窗
        total:0,  //当前的总条数
        pageData:{
          page:1,
          limit:15
        },
        userform:{
          name:''
        }
      }
    },
    methods: {
      // 提交表单
      submit(){
        this.$refs.form.validate((valid)=>{
          if (valid) {  //为true说明表单通过了校验
            if (this.modalType === 0) {
              // 將data中的form(有v-model双向绑定)传过去，在那边拿到它body中的数据
              addUser(this.form).then(()=>{
                this.getList()  //重新获取列表的接口
              })
            }else{
              editUser(this.form).then(()=>{
                this.getList()
              })
            }
            // 后续对表单的处理
            this.dialogVisible= false
            this.$refs.form.resetFields() //清空表单数据
          }
        })
      },
      //弹窗关闭的时候触发
      handleClose(){
        this.$refs.form.resetFields()
        this.dialogVisible= false
      },
      cancel(){
        this.handleClose()
      },
      handleEdit(row){
        this.modalType = 1
        this.dialogVisible = true
        // 注意：需要对当前行数据进行深拷贝，否则会出错
        // 不能直接赋值，因为如果后面对form表单进行操作的时候，会修改掉row的数据，而row是从上面传下来的，所以会导致数据错乱(不信解开看下面的mounted)
        this.form = JSON.parse(JSON.stringify(row))
      },
      handleDelete(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delUser(row.id).then(()=>{
              this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 注意，此处使用的是箭头函数，所以它的this指向vue，但是如果不是箭头函数有可能会出错
            this.getList()
          })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
          });          
        });
      },
      handleAdd(){
        this.modalType = 0
        this.dialogVisible = true
      },
      // 获取列表的数据
      getList(){
        getUser({params:{...this.pageData,...this.userform}}).then(({data})=>{  //axios中get请求需要你携带一个名为params的参数，所以我们把它命名为params
          console.log(data)
          this.tableData = data.list
          this.total = data.count || 0
        })
      },
      handlePage(val){
        this.pageData.page = val
        this.getList()
      },
      // 列表的查询
      onSubmit(){
        this.getList()
      } 
    },
    mounted(){
      this.getList()

      // var abc = [11,22,33,55]
      // var aaa = abc
      // console.log(aaa,'aaa')
      // console.log(abc,'abc')
      // var hhh = aaa
      // console.log(hhh,'hhh1')
      // hhh[1] = 100
      // console.log(hhh,'hhh2')
      // console.log(abc,'abc2')
      // console.log(aaa,'aaa2')
    },
 
}

  /* 
  深拷贝是什么？
  深拷贝作用在引用类型上，例如：Object，Array  深拷贝不会拷贝引用类型的引用，
  而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，
  使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突。

  为什么要使用深拷贝？
  我们希望在改变新的数组（对象）的时候，不改变原数组（对象）

  方法：
  json.stringify和json.parse实现深拷贝
  arr = JSON.parse(JSON.stringify(row))
  */

</script>

<style lang="less" scoped>
  .manage{
    height: 90%;
    .manage-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom:10px ;
      .el-form-item{
        margin: 0;
      }
    }
    .common-table{
      height: 100%;
      position: relative;
      .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
      }
    }
  }
</style>